<template>
  <div>
    <vue-loading v-show="!isLoaded"></vue-loading>
    <div v-show="isLoaded">
      <Table :request-data="requestData" v-on:list="listHander" ref="table">
        <template slot="search-box">
          <el-form-item label="筛选">
            <el-select
              placeholder="选择筛选项目"
              style="width:130px"
              v-model="requestData.postData.filter_type"
            >
              <el-option label="全部" value></el-option>
              <el-option v-for="item of filterType" :label="item.value" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="filterInputShow">
            <el-input v-model="requestData.postData.filter_text" style="width:130px"></el-input>
          </el-form-item>
          <el-form-item v-show="filterSelectShow">
            <el-select
              placeholder="选择筛选项目"
              style="width:130px"
              v-model="requestData.postData.filter_text"
            >
              <el-option v-for="item of statusType" :label="item.value" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </template>
        <template slot="table-box">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-form label-position="left" inline class="table-expand">
                  <el-form-item label="提交时间">
                    <span>{{$utils.formatDateTime(scope.row.add_time)}}</span>
                  </el-form-item>
                  <el-form-item label="发货时间">
                    <span>{{ $utils.formatDateTime(scope.row.fh_time) }}</span>
                  </el-form-item>
                  <el-form-item label="收货时间">
                    <span>{{ $utils.formatDateTime(scope.row.sh_time)}}</span>
                  </el-form-item>
                  <el-form-item label="付款方式">
                    <span>{{ scope.row.pay_type }}</span>
                  </el-form-item>
                  <el-form-item label="商品编号">
                    <span>{{ scope.row.goods_id }}</span>
                  </el-form-item>
                  <el-form-item label="订单编号">
                    <span>{{ scope.row.order_id }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="订单日期" width="160">
              <template slot-scope="scope">
                <span>{{ $utils.formatDateTime(scope.row.add_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" min-width="400"></el-table-column>
            <el-table-column prop="buyer" label="买家" width="150"></el-table-column>
            <el-table-column prop="price" label="价格(积分)" width="100"></el-table-column>
            <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
            <el-table-column prop="order_status" label="订单状态" width="150"></el-table-column>
            <el-table-column prop="seller" label="卖家" width="150"></el-table-column>

            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleAction(scope.$index)"
                >{{getBtnText(scope.$index)}}</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="handleCancel(scope.$index)"
                >{{scope.row.order_status=='付款'?'取消':''}}</el-button>

                <el-button type="text" size="small" @click="handleRemove(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </Table>
      <el-dialog :visible.sync="diglogVisible" custom-class="dialog" title="快递信息（提交后无法修改）">
        <el-form label-position="right" label-width="70px">
          <el-form-item label="快递名称">
            <el-input placeholder="输入快递名称" v-model="express_name"></el-input>
          </el-form-item>
          <el-form-item label="快递单号">
            <el-input placeholder="输入输入快递单号" v-model="express_number"></el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 0;">
            <el-button type="primary" @click="handleFH">立即发货</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Table from "@/components/Table.vue";
export default {
  components: {
    Table
  },
  data() {
    return {
      isLoaded: false,
      diglogVisible: false,
      filterInputShow: false,
      filterSelectShow: false,
      currentIndex: -1,
      express_name: "",
      express_number: "",
      requestData: {
        urlPath: "/order/list?type=goods",
        postData: {
          filter_type: "",
          filter_text: "",
          page_num: 1
        }
      },
      tableData: [],
      filterType: [
        { key: "seller", value: "卖家账号" },
        { key: "buyer", value: "买家账号" },
        { key: "order_id", value: "订单编号" },
        { key: "goods_id", value: "商品编号" },
        { key: "title", value: "商品标题" },
        { key: "order_status", value: "订单状态" }
      ],
      statusType: [
        { key: "付款", value: "付款" },
        { key: "发货", value: "发货" },
        { key: "收货", value: "收货" },
        { key: "取消", value: "取消" }
      ]
    };
  },
  methods: {
    listHander(e) {
      this.tableData = e;
      this.isLoaded = true;
    },
    search() {
      this.$refs.table.init();
    },
    async handleRemove(index) {
      await this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      this.$http
        .post("/order/delete", { order_id: this.tableData[index].order_id })
        .then(res => {
          if (res.code == 200) {
            this.tableData.splice(index, 1);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    async handleCancel(index) {
      await this.$confirm("此操作将取消购买的物品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      this.$http
        .post("/order/do?action=QX", {
          order_id: this.tableData[index].order_id
        })
        .then(res => {
          if (res.code == 200) {
            this.tableData[index].order_status = "取消";
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    async handleAction(index) {
      let statusText = this.getBtnText(index);
      let value = "";
      await this.$confirm(`你是否要${statusText}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      if (statusText == "发货") {
        if (this.tableData[index].order_type == "积分兑换") {
          this.currentIndex = index;
          this.diglogVisible = true;
          return;
        }
        value = "FH";
      } else if (statusText == "收货") {
        value = "SH";
      }
      this.$http
        .post("/order/do?action=" + value, {
          order_id: this.tableData[index].order_id
        })
        .then(res => {
          if (res.code == 200) {
            this.tableData[index].order_status = statusText;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    handleFH() {
      this.$http
        .post("/order/do?action=FH", {
          order_id: this.tableData[this.currentIndex].order_id,
          express_name: this.express_name,
          express_number: this.express_number
        })
        .then(res => {
          if (res.code == 200) {
            this.tableData[this.currentIndex].order_status = "发货";
            this.diglogVisible = false;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    getBtnText(index) {
      let order = this.tableData[index];
      if (order.order_status == "付款") {
        return "发货";
      } else if (order.order_status == "发货") {
        return "收货";
      }
    }
  },
  watch: {
    "requestData.postData.filter_type": function(value) {
      if (value === "") {
        this.filterInputShow = false;
        this.filterSelectShow = false;
        this.requestData.postData.filter_text = "";
      } else if (value === "order_status") {
        this.filterInputShow = false;
        this.filterSelectShow = true;
        this.requestData.postData.filter_text = "";
      } else {
        this.filterInputShow = true;
        this.filterSelectShow = false;
        this.requestData.postData.filter_text = "";
      }
    }
  },
  created() {}
};
</script>
<style>
.dialog {
  width: 500px;
}
</style>



